<template>
<div>
  <!-- 面包屑导航 -->
  <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>音乐管理</el-breadcrumb-item>
    <el-breadcrumb-item>歌手列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 条件查询   -->
  <el-form :inline="true" :model="query" size="mini" >
    <el-form-item label="歌手名称:">
      <el-input v-model.trim="query.singerName"></el-input>
    </el-form-item>
    <el-form-item label="歌手性别:">
      <el-select v-model="query.singerSex" clearable filterable style="width:120px;">
        <el-option v-for="item in sexList" :key="item.id" :label="item.value" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
      <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
    </el-form-item>
  </el-form>
  <!--  列表数据  -->
  <el-table :data="list" border style="width: 100%">
    <el-table-column align="center" label="序号" width="60" type="index"></el-table-column>
    <el-table-column align="center" prop="singerAvatar" label="头像" width="120">
      <template slot-scope="scope">
        <el-image :src="scope.row.singerAvatar" style="width: 50px;height: 50px;border-radius: 50%"></el-image>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="singerName" label="姓名" width="160"></el-table-column>
    <el-table-column align="center" prop="singerSex" label="性别" width="90">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.singerSex === 1" type="success">男</el-tag>
        <el-tag v-if="scope.row.singerSex === 0" type="danger">女</el-tag>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="singerAge" label="年龄" width="160"></el-table-column>
    <el-table-column align="center" prop="singerAddr" label="地址" width="260"></el-table-column>
    <el-table-column align="center" prop="createTime" label="创建时间" width="200">
      <template slot-scope="scope">
        <!-- 格式化日期 -->
        {{getFormat(scope.row.createTime)}}
      </template>
    </el-table-column>
    <el-table-column  align="center" label="操作">
      <template slot-scope="scope">
        <el-button icon="el-icon-search" type="primary" size="mini" @click="handleDetail(scope.row.singerId)">查看</el-button>
        <el-button icon="el-icon-edit-outline" type="success" size="mini" @click="handleEdit(scope.row.singerId)">编辑</el-button>
        <el-button icon="el-icon-document-delete" type="danger" size="mini" @click="handleDel(scope.row.singerId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="query.current"
    :page-sizes="[2, 10, 20, 50]"
    :page-size="query.size"
    layout="total, sizes, prev, pager, next, jumper"
    :total="query.total">
  </el-pagination>

  <!-- 添加弹窗 -->
  <add :visiable="add.visiable" :remoteClose="remoteClose" />

  <!-- 详情弹窗 -->
  <detail :id="detail.id" :visiable="detail.visiable" :remoteClose="remoteClose" />

  <!-- 编辑弹窗 -->
  <edit :id="edit.id" :visiable="edit.visiable" :remoteClose="remoteClose" />
</div>
</template>

<script>
import musicApi from '@/api/music';
import { dateFormat } from "@/utils/date";
import Add from './add';
import Detail from './detail';
import Edit from './edit';
export default {
  components:{
    Add, Detail, Edit
  },
  data() {
    return {
      list: [], // 歌手列表
      sexList: [
        {id: 1, value: '男'},
        {id: 0, value: '女'}
      ],
      query: {
        singerName: '',
        singerSex: '',
        current: 1,   // 当前页码
        size: 10,     // 每页大小
        total: 0
      },  // 查询条件
      add: {
        visiable: false
      },
      detail: {
        id: '',
        visiable: false
      },
      edit: {
        id: '',
        visiable: false
      }
    }
  },

  created() {
    this.fetchData();
  },

  methods: {
    // 查询所有的歌手信息
    fetchData() {
      musicApi.getAllSingerByData(this.query).then(response => {
        if (response.code === 200) {
          this.list = response.data.list;
          this.query.total = response.data.total;
        }
      })
    },

    // 查看详情
    handleDetail(id) {
      this.detail.id = id;
      this.detail.visiable = true;
    },

    // 编辑
    handleEdit(id) {
      this.edit.id = id;
      this.edit.visiable = true;
    },

    // 删除
    handleDel(id) {
      this.$confirm('确认删除这条记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        musicApi.deleteSinger(id).then(response => {
          if (response.code === 200) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 1500
            });
          } else if (response.code === 306) {
            this.$notify.error({
              title: '错误',
              message: '您没有操作权限，请联系管理员',
              duration: 1500
            });
          } else {
            this.$notify.error({
              title: '错误',
              message: '系统异常，请稍后再试',
              duration: 1500
            });
          }
          // 刷新列表
          this.fetchData();
        })
      }).catch(() => {
        // 取消删除
      });
    },

    // 添加
    handleAdd() {
      this.add.visiable = true;
    },

    // 条件查询
    queryData() {
      this.fetchData();
    },

    // 重置
    reload() {
      this.query.singerName = '';
      this.query.singerSex = '';
      this.fetchData();
    },

    // 格式化日期
    getFormat(date) {
      return dateFormat(date);
    },

    // val 是切换之后的每页显示多少条
    handleSizeChange(val) {
      this.query.size = val;
      this.fetchData();
    },

    // 当页码改变后触发此方法 val是当前点击（或输入）的页码
    handleCurrentChange(val) {
      this.query.current = val;
      this.fetchData();
    },

    // 关闭窗口
    remoteClose() {
      this.add.visiable = false;
      this.detail.visiable = false;
      this.detail.id = '';
      this.edit.visiable = false;
      this.edit.id = '';
      this.fetchData();
    },
  }
}
</script>

<style scoped>

</style>
